<template>
  <div class="evaluate__detail">
    <common-pull-down-up
      v-model:pullOptions="pullOptions"
      :pageOptions="queryParams"
      :title="titleName"
      @loadData="loadData"
      @pullDownRefresh="pullDownRefresh"
    >
      <template #top>
        <div class="tabs">
          <div
            class="item"
            v-for="item in evaluateTabs.tabs"
            :class="evaluateTabs.currentTab === item.key ? 'active' : ''"
            :key="item.value"
            @click="onTabClick(item)"
          >
            <span class="desciption">{{ item.description }}({{ item.num }})</span>
            <div class="line"></div>
          </div>
        </div>
      </template>
      <template #content>
        <div class="evaluate">
          <div class="top">
            <div class="title">
              <span>好评率</span>
              <span class="number">{{ evaluateTabs.praiseRate * 100 }}%</span>
            </div>
            <div
              class="status__box"
              :class="isShowMoreLabel ? 'status__box__show__all' : ''"
              v-show="evaluateTabs.tabs[evaluateTabs.currentTab].list.length > 0"
            >
              <div class="area" ref="areaRef">
                <div
                  id="evaluate__detail__area"
                  class="status"
                  :class="String(queryParams.tagId) === String(item.tagId) ? 'active' : ''"
                  v-for="item in evaluateTabs.tabs[evaluateTabs.currentTab].list"
                  :key="item.id"
                  @click="onLabelClick(item)"
                >
                  {{ item.tagName }}({{ item.tagNum || 0 }})
                </div>
              </div>
            </div>
            <div
              class="more"
              :class="isShowMoreLabel ? 'more__active' : ''"
              v-show="isLimitHeight"
              @click="isShowMoreLabel = !isShowMoreLabel"
            >
              <span class="text">{{ isShowMoreLabel ? '收起' : '更多' }}</span>
              <svg-icon class="iconfont" name="arrow-right"></svg-icon>
            </div>
          </div>
          <div class="list__msg">
            <evaluate-item-component
              v-for="(item, index) in list"
              :key="item.id"
              :detail="item"
              :showBtBorder="index < list.length ? true : false"
            />
          </div>
        </div>
      </template>
      <template #noMore>
        <img src="@/assets/image/newsCenter/no-news.png" />
      </template>
    </common-pull-down-up>
    <!-- <div class="btn" @click="onConcat">联系他</div> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, nextTick, watch } from 'vue'
import CommonPullDnUp from '@/components/CommonPullDnUp.vue'
import usePullDownUp from '@/utils/usePullDownUp'
import EvaluateItem from './components/EvaluateItem.vue'
import { UserTypesEm } from '@/store/enums'
import { EvaluteTypeEm } from './utils/enums'
import { TagsType, EvaluateItemType, EvaluateType } from './utils/types'
import useIntroduce from './utils/useIntroduce'
import { useRouter, useRoute } from 'vue-router'
import defaultAvatar from '@/assets/image/introduce/default_avatar.png'

export default defineComponent({
  name: 'EvaluateDetail',
  components: {
    'common-pull-down-up': CommonPullDnUp,
    'evaluate-item-component': EvaluateItem
  },
  setup() {
    const { userId, userType } = useRoute().query as {
      userId: string // 司机/货主id
      userType: string // 用户类型 司机/货主
    }

    const areaRef = ref()

    // 评价标签是否显示更多
    const isShowMoreLabel = ref<boolean>(false)

    // 标签模块 是否超过最大高度 用来显示隐藏 更多这个按钮
    const isLimitHeight = ref<boolean>(false)

    const requestUrl = ref('introduce/handleTransportBillCommentPage') // 请求链接
    const queryModel = reactive<{
      tagAttribut?: string | number
      consId?: string | number
      driverId?: string | number
      tagId?: string | number
      type?: number
    }>({
      tagAttribut: '',
      tagId: ''
    }) // 搜索参数
    const titleName = ref<string>('') // 标题
    if (UserTypesEm.CARGOOWNER.value === Number(userType)) {
      titleName.value = '货主评价'
      queryModel.consId = userId
      queryModel.type = EvaluteTypeEm.DRIVER_TO_CONS.value
    } else if (UserTypesEm.DRIVER.value === Number(userType)) {
      titleName.value = '司机评价'
      queryModel.type = EvaluteTypeEm.CONS_TO_DRIVER.value
      queryModel.driverId = userId
    } else if (UserTypesEm.CARRIER.value === Number(userType)) {
      titleName.value = '承运人评价'
      // queryModel.driverId = userId
    }

    const { evaluateTabs, handleGetIntroduce } = useIntroduce(userId, userType)

    const { pullOptions, loadData, pullDownRefresh, queryParams, onRefresh } = usePullDownUp({
      url: requestUrl,
      queryModel,
      asyncRefreshRequestCallback: async () => {
        await handleGetIntroduce()
        judgeLabelHeightLimit()
      }
    })

    watch(
      () => evaluateTabs.currentTab,
      async val => {
        judgeLabelHeightLimit()
      }
    )

    // 评价列表数据
    const list = computed<EvaluateItemType[]>(() => {
      let name = ''
      if (UserTypesEm.CARGOOWNER.value === Number(userType)) {
        name = 'driverName'
      } else if (UserTypesEm.DRIVER.value === Number(userType)) {
        name = 'consName'
      }
      return pullOptions.rows.map((item: EvaluateType) => {
        const tag = {
          name: item[name],
          time: item.commentTime,
          startNumber: item.starNum,
          memo: item.content,
          avatar: defaultAvatar,
          id: item.id
        }
        return tag
      })
    })

    // 判断标签高度是否超过最大高度
    const judgeLabelHeightLimit = async (): Promise<void> => {
      await nextTick()
      const height = areaRef.value.clientHeight
      if (Number(height) > 76) {
        isLimitHeight.value = true
      } else {
        isLimitHeight.value = false
      }
    }

    // 点击评价标签
    const onLabelClick = (item: TagsType): void => {
      const tagId = item.tagId !== queryParams.tagId ? item.tagId : ''
      onRefresh({ tagId })
    }

    // 点击切换tab
    const onTabClick = (item: any): void => {
      evaluateTabs.currentTab = item.key
      onRefresh({ tagAttribut: item.value, tagId: undefined })
    }

    // 联系他/她
    const onConcat = (): void => {
      //
    }

    return {
      areaRef,
      onConcat,
      onLabelClick,
      onTabClick,
      loadData,
      queryParams,
      pullDownRefresh,
      pullOptions,
      titleName,
      evaluateTabs,
      isShowMoreLabel,
      isLimitHeight,
      list
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';

.evaluate__detail {
  width: 100%;
  height: 100%;
  .commonPullDnUp__ct {
    background: #fcfcfc;
  }
  .tabs {
    padding: 28px 12px 0 12px;
    background-color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 0px 6px 14px 0px rgba(221, 221, 221, 0.08);
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .desciption {
        font-size: 14px;
        font-weight: 600;
        color: #575c72;
        line-height: 20px;
        margin-bottom: 10px;
      }
      .line {
        width: 30px;
        height: 2px;
        background: white;
        border-radius: 2px;
      }
    }
    .active {
      .desciption {
        color: #409eff;
      }
      .line {
        width: 30px;
        height: 2px;
        background: #409eff;
        border-radius: 2px;
      }
    }
  }
  .evaluate {
    .list__msg {
      width: 100%;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
      border-radius: 10px;
      padding: 15px 10px;
    }
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      margin-bottom: 15px;
      background-color: white;
      box-shadow: 0px 2px 10px 0px rgba(93, 184, 255, 0.07);
      border-radius: 10px;
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      .title {
        width: 100%;
        span {
          font-size: 11px;
          font-weight: 400;
          color: #9fa2af;
          line-height: 16px;
        }
        .number {
          font-size: 12px;
          font-weight: 400;
          color: #fc9e29;
          line-height: 17px;
        }
      }

      .number {
        padding-left: 5px;
      }
      .more {
        display: flex;
        align-items: center;
        .text {
          font-weight: 400;
          color: #575c72;
          font-size: 12px;
          line-height: 17px;
        }
        .iconfont {
          width: 11px;
          color: #9fa2af;
          padding-left: 4px;
          transform: rotate(90deg);
        }
      }
      .more__active {
        .iconfont {
          width: 11px;
          color: #9fa2af;
          padding-left: 4px;
          transform: rotate(270deg);
        }
      }
      .status__box {
        width: 100%;
        margin-top: 10px;
        height: 76px;
        overflow: hidden;
        .area {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .status {
          background: #f5f5f7;
          border-radius: 14px;
          padding: 0 10px;
          box-sizing: border-box;
          height: 28px;
          line-height: 28px;
          font-size: 14px;
          font-weight: 400;
          color: #575c72;
          margin: 0 10px 10px 0;
          border: 1px solid #f5f5f7;
        }
        .active {
          border: 1px solid #409eff;
          color: #2684ff;
        }
      }
      .status__box__show__all {
        height: auto;
      }
    }
  }
}
</style>
